<template>
	<view>
		<view class="det-container">
			<view class="loadingState" v-if="loadingState">
				<u-skeleton rows="3" title loading avatar ></u-skeleton>
			</view>
			<view v-else>
				<view class="det-title">{{detail.title}}</view>
				<view class="det-userinfo">
					<view class="det-ava">
						<image class="det-img" :src="giveSrc(detail)"></image>
					</view>
					<view class="det-text">
						<view class="det-name">{{giveName(detail)}}</view>
						<view class="det-time">
							<uni-dateformat :date="detail.publish_date" format="MM/dd hh:mm" :threshold="[60000,3600000]"></uni-dateformat>
						</view>
					</view>
				</view>
				<view class="det-content">
					<u-parse :content="detail.content" :tagStyle="tagStyle"></u-parse>
				</view>
				
				
				<view class="det-like-box">
					<view class="det-like-btn" :class="activeFlag ? 'active':''" @click="clickLike">
						<view class="det-like-pic">
							<image class="det-like-img" src="../../static/like.png"></image>
						</view>
						<view class="det-like-num">{{detail.like_count ? detail.like_count:''}}</view>
					</view>
					<view class="det-like-user">
						<image class="det-like-user-img" src="../../static/logo.png"></image>
					</view>
					<view class="looked">
						<view class="looked-num">{{detail.view_count}}</view>
						<view class="looked-damwei">人看过</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {giveName,giveSrc,likeFunc} from '../../utils/tools.js'
	import {store} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database();
	const utilsObj = uniCloud.importObject("utilsObj",{
		customUI:true
	})
	export default {
		data() {
			return {
				"activeFlag":false,
				"loadingState":true,
				"artID":"",
				"detail":{},
				"tagStyle":{
					p:"line-height:1.7em;font-size:40rpx;",
					img:"margin:10rpx 0;"
				}
			};
		},
		onLoad(e) {
			this.artID = e.id
			setTimeout(()=>{
				this.getArtDetail()
				this.updateView()
				this.judgeLike()
			},100)
		},
		methods:{
			giveName,giveSrc,
			getArtDetail(){
				let artTemp = db.collection("quanzi_article").field("_id,user_id,publish_date,title,content,description,comment_count,like_count,view_count,picurls").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				let likeTemp = db.collection("quanzi_like").getTemp()
				
				db.collection(artTemp,userTemp,likeTemp).where({
					"_id._value":this.artID
				}).get().then(res=>{
					console.log(res)
					this.detail = res.result.data[0]
					this.loadingState = false
				})
			},
			updateView(){
				utilsObj.opreator("quanzi_article","view_count",this.artID,1).then(res=>{
					console.log(res)
				})
			},
			async clickLike(){
				let time = Date.now()
				if(time - this.likeTime < 2000){
					uni.showToast({
						title:"操作太频繁，请稍后...",
						icon:'none'
					})
					return;
				}
				this.likeTime = time
				this.activeFlag ? this.detail.like_count-- : this.detail.like_count++;
				// let flag = await db.collection("quanzi_like")
				// .where(`article_id == "${this.artID}" && user_id == $cloudEnv_uid`).count()
				// console.log(flag)
				// if(flag.result.total){
				// 	db.collection("quanzi_like")
				// 	.where(`article_id == "${this.artID}" && user_id == $cloudEnv_uid`).remove()
				// 	this.detail.like_count--;
				// 	utilsObj.opreator("quanzi_article","like_count",this.artID,-1)
				// }else{
				// 	db.collection("quanzi_like").add({
				// 		article_id:this.artID,
				// 	})
				// 	this.detail.like_count++;
				// 	utilsObj.opreator("quanzi_article","like_count",this.artID,1)
				// }
				this.activeFlag = !this.activeFlag
				likeFunc(this.artID)
				
			},
			
			// async likeFunc(){
			// 	let flag = await db.collection("quanzi_like")
			// 	.where(`article_id == "${this.artID}" && user_id == $cloudEnv_uid`).count()
			// 	console.log(flag)
			// 	if(flag.result.total){
			// 		db.collection("quanzi_like")
			// 		.where(`article_id == "${this.artID}" && user_id == $cloudEnv_uid`).remove()
					
			// 		utilsObj.opreator("quanzi_article","like_count",this.artID,-1)
			// 	}else{
			// 		db.collection("quanzi_like").add({
			// 			article_id:this.artID,
			// 		})
					
			// 		utilsObj.opreator("quanzi_article","like_count",this.artID,1)
			// 	}
			// },
			async judgeLike(){
				if(store.hasLogin){
					let flag = await db.collection("quanzi_like")
					.where(`article_id == "${this.artID}" && user_id == $cloudEnv_uid`).count()
					console.log(flag)
					if(flag.result.total){
						this.activeFlag = true
					}else{
						this.activeFlag = false
					}
				}else{
					this.activeFlag = false
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f4f4f4;
}
.det-container{
	padding: 50rpx;
	background-color: white;
	.det-title{
		font-size: 60rpx;
		font-weight: 600;
		
	}
	.det-userinfo{
		display: flex;
		align-items: center;
		height: 150rpx;
		.det-ava{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			.det-img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.det-text{
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			.det-name{
				font-size: 40rpx;
			}
			.det-time{
				font-size: 32rpx;
				color: #919191;
			}
		}
	}
	.det-content{
		
	}
	.det-like-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		//height: 250rpx;
		margin-top: 50rpx;
		.det-like-btn{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 150rpx;
			width: 300rpx;
			background-color: #e9e9e9;
			border-radius: 70rpx;
			
			&.active{
				background-color: #a4f379;
			}
			.det-like-pic{
				width: 60rpx;
				height: 60rpx;
				.det-like-img{
					width: 100%;
					height: 100%;
				}
			}
			.det-like-num{
				color: white;
				font-size: 40rpx;
			}
		}
		.det-like-user{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-top: 30rpx;
			.det-like-user-img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.looked{
			display: flex;
			margin-top: 20rpx;
			.liked-num{
				
			}
			.liked-danwei{
				
			}
		}
	}
}
</style>
